// .banner {
//     height: 350px;
//     background-color: #f1f1f1;

//     .banner-box {
//         width: 265px;
//         height: 270px;
//         // background-color: red;
//         bottom: 40px;
//         background: url(../imgs/API详情页_11.jpg)no-repeat #ffffff center;
//         background-position: 66px 55px;
//     }

//     .center-box {
//         width: 1200px;
//         margin: auto;
//         height: 350px;
//     }

//     .banner-img {
//         display: inline-block;
//         width: 50px;
//         height: 50px;
//         bottom: 26px;
//         left: 45px;
//     }

//     .banner-img p {
//         margin-top: 5px;
//     }

//     .banner-imgs {
//         left: 110px;
//     }

//     .banner-imgss {
//         left: 174px;
//     }

//     #right-box {
//         width: 620px;
//         height: 275px;
//         padding-left: 310px;


//         span:nth-child(2) {
//             width: 90px;
//             height: 22px;
//             display: inline-block;
//             color: #5cd1fa;
//             border: 1px solid #5cd1fa;
//             line-height: 22px;
//             text-align: center;
//             font-size: 14px;
//         }

//         span:nth-child(3) {
//             width: 90px;
//             height: 22px;
//             display: inline-block;
//             color: #5cd1fa;
//             border: 1px solid #5cd1fa;
//             line-height: 22px;
//             text-align: center;
//             font-size: 14px;
//         }

//         .user {
//             height: 40px;


//             span {
//                 margin-left: 26px;
//                 display: inline-block;
//                 margin-top: 5px;
//                 color: #f8aa39;
//             }

//             .user-p {
//                 .card-box {
//                     width: 95px;
//                     height: 30px;

//                 }

//                 img {
//                     margin-left: 12px;
//                 }

//                 img:nth-child(1) {
//                     margin-left: 0;
//                 }
//             }

//             .card {
//                 color: #727272;
//             }

//             .card-box {
//                 width: 120px;
//                 height: 40px;
//                 padding-left: 35px;
//             }

//             .cards {
//                 top: 45px;
//             }
//         }
//     }


// }

#grain {
    height: 415px;
    background-color: #f1f1f1;

    .card {
        color: #7d7d7d;
    }

    .username {
        color: #f7b14b;

        span {
            margin-left: 3px;
        }

        img {
            margin-left: 20px;
        }

        img:nth-child(1) {
            margin-left: 0;
        }
    }

    a {
        width: 120px;
        height: 40px;
        display: inline-block;
        text-align: center;
        line-height: 40px;
        background-color: #00bdff;
        color: #fff;
    }

    .p-span {
        span:nth-child(1) {
            font-size: 18px;
            margin-right: 10px;
        }

        span:nth-child(2) {
            border: 1px solid #00bdff;
            color: #00bdff;
            margin-right: 10px;
            height: 25px;
            width: 100px;
            display: inline-block;
            line-height: 25px;
            text-align: center;
        }

        span:nth-child(3) {
            border: 1px solid #00bdff;
            color: #00bdff;
            height: 25px;
            display: inline-block;
            line-height: 25px;
            width: 80px;
            text-align: center;
        }
    }


    .left-box {
        .API {
            transform: translate(50%);
            padding-top: 60px;

        }

        li {
            height: 26px;
            width: 40px;
            float: left;
            text-align: center;
            margin-right: 20px;
            transform: translate(120%);
        }

        span {
            display: inline-block;
            margin-top: 8px;
            color: #c7c7c7;
            margin-left: -3px;
        }

    }


    .api-title {
        left: 50%;
        transform: translateX(-50%);
        top: 0;

        .left-box {
            width: 260px;
            height: 270px;
            background-color: #fff;
        }

        .rigt-box {
            width: 885px;
            height: 270px;

            .select {
                li {
                    padding: 5px 10px;
                    border: 1px solid #999;
                    float: left;
                    margin-right: 15px;
                    cursor: pointer;
                    user-select: none;

                    &.active {
                        border: 1px solid #00bdff;
                        background: url(../imgs/select.png) no-repeat right bottom;
                    }
                }

                .default {
                    .vcode {
                        width: 107px;
                        right: 65%;
                        top: 147px;

                        display: none;

                        img {
                            width: 100%;
                            margin-left: 2px;
                        }
                    }

                    &:hover {
                        border: 1px solid #00bdff;
                        color: #00bdff;

                        .vcode {
                            display: block;
                        }
                    }
                }

            }

        }
    }

}

#mydiv {
    overflow: hidden;
    position: relative;

    canvas {
        width: 100% !important;
        z-index: 0 !important;
        height: 415px;
        opacity: 5px;
        position: relative !important;
    }
}

.api-tab {
    line-height: 45px;
    border-bottom: 1px solid #f4f4f4;

    li {
        float: left;
        margin-right: 110px;
        cursor: pointer;
        user-select: none;

        &.active {
            color: #00bdff;
            border-bottom: 3px solid #00bdff;
        }
    }
}

main {

    .left-box {
        width: 920px;
        height: 825px;

        &>div {
            display: none;

        }

        &>.on {
            display: block;
        }
    }

    .right-box {
        width: 220px;
    }

    span {
        color: #c4a699;
    }

    .active {
        display: inline-block;
        margin-top: 20px;
    }

    .love {
        color: #c4a699;

    }

    .dabox {
        width: 220px;
        height: 60px;

        .zuobians {
            width: 160px;
            height: 60px;
            float: right;
            top: 85px;
            left: 60px;
        }

        .zuobianss {
            width: 160px;
            height: 60px;
            float: right;
            top: 175px;
            left: 60px;
        }

        .zuobiansss {
            width: 160px;
            height: 60px;
            float: right;
            top: 260px;
            left: 60px;
        }

        .zuobianssss {
            width: 160px;
            height: 60px;
            float: right;
            top: 348px;
            left: 60px;
        }
    }


    .youbian {
        .boder {
            width: 60px;
            height: 60px;
            border: 1px solid pink;
            text-align: center;
            line-height: 60px;
            margin-top: 25px;

            span {
                border-bottom: 1px dashed gray;
            }
        }

        .zuobian {
            width: 160px;
            height: 60px;
            float: right;
            top: 0;
            left: 60px;

            .zuoi {
                color: #999999;
            }
        }
    }
}

.love-img {
    padding: 21px 7px;
}

.feoter {
    height: 150px;
    width: 100%;
    background-color: #33beff;

    .box {
        font-size: 24px;
        color: #fcffff;
        padding-top: 28px;
    }

    .mfeiy {
        display: inline-block;
        width: 150px;
        height: 40px;
        color: #fcffff;
        line-height: 40px;
        margin-top: 25px;
        border: 1px solid #e3f6ff;
    }
}